<template>
    <div class="box">
    	<div class="top_h">
    		<div class="headerlist"><span style="color:#acacac;">物流单号：</span>{{Info.Code}} <button class="btn_copy">复制</button></div>
    		<div class="headerlist"><span style="color:#acacac;">物流公司：</span>{{Info.Name}}</div>
    		<div class="headerlist"><span style="color:#acacac;">件数重量：</span>{{Info.Summary}}</div>
    		<div class="headerlist"><span style="color:#acacac;">发货时间：</span>{{Info.ShipTime}}</div>
    	</div>
    	<div class="top_h">
    		<div class="headerlist">
    			当前物流状态
    			<button class="btn_copy detail_logistics">物流详情</button>
    		</div>
    		<div class="status">{{logistics.Content}}</div>
    		<div class="time">{{logistics.Time}}</div>
    	</div>
    	<div class="goodlist">
    		<div class="goodtitlebox">
        		<img src="../../assets/icon/dp3.png" class="goodicon">
        		<div class="goodaddress">已发商品</div>
        	</div>
        	<div class="list" v-for='(item,idx) in Orders'>
        		<div class="detail_title">
        			<div class="order_num">商品单号：{{item.Code}}</div>
        			<button class="btn_copy_a">复制</button>
        		</div>
        		<div class="img_box">
        			<img class="detail_img" :src="item.Cover" @click='ItemDetail(item.ItemID)'>
        			<div class="detail_content" @click='ItemDetail(item.ItemID)'>
        				<div class="title"><span>{{item.Title}}</span> </div>
        				<div class="total_money">￥{{item.Price}}</div>
        				<div class="total_money total_num">共{{item.TotalQty}}件</div>
        			</div>
        			<div class="size_list" >
        				<div class="color_size_qty" v-for='(item2,idx) in item.Products'> {{item2.Color}}/{{item2.Size}}/{{item2.Qty}} </div>
        			</div>
        		</div>
        	</div>
    	</div>
    	<div class="foot_box">
    		<div class="foot_title">发货金额</div>
    		<div class="foot_money">{{Info.ProductAmount}}</div>
    		<div class="foot_total_num">总款数：{{Info.ItemCount}}款，总件数：{{Info.ShipQty}}件</div> 
    		<div class="foot_total_money">本次合计： <span style="color:#ff3976;">{{Info.TotalShipAmount}}</span> </div> 
    	</div>
    </div>
</template>

<script>
    const imgutil = require('../../common/until.js')
    import { Loadmore, Indicator, MessageBox, Toast } from 'mint-ui'
    export default {
        name: 'logistics',
        data () {
            return {
                id:this.$route.query.id,
                ExpressInfoList: [],
                logistics: {},
                Info: {},
                Orders: []
            }
        },
        created: function () {
            this.init()
        },
        methods: {
            init: function(){
            	const that = this
            	Indicator.open()
            	that.$http('/pinhuobuyer/GetPackageInfov2',{shipid:that.id},function(res){
            		Indicator.close()
            		if(res.Result){
            			that.ExpressInfoList = res.Data.ExpressInfoList
            			that.logistics = res.Data.ExpressInfoList[0]
            			that.Info = res.Data.Info
            			res.Data.Orders.map(item => {
            				item.Cover = imgutil.getUrl(item.Cover,400)
            			})
            			that.Orders = res.Data.Orders
            		}
            	},'GET')
            },
            ItemDetail: function(id){
            	this.$router.push({path:'/itemdetail',query:{id:id}})
            }
        },
        components:{

        }
    }
</script>
<style scoped>
	.box{width: 100%;height: 100vh;background-color: #f5f5f5;overflow-y: scroll;}
    .top_h{background-color: #fff;padding: 10px 3%;width: 94%;margin-bottom: 10px;}
    .headerlist{height: 20px;line-height: 20px;padding: 5px 0;color: #000;font-size: 14px;position: relative;width: 100%;}
    .btn_copy{padding: 4px 10px;border-radius: 3px;line-height: 20px;background-color: #ddd;position: absolute;right: 0;top: 0;border:none;outline: transparent;}
    .detail_logistics{background-color: #ff3976;color: #fff;}
    .status{width: 100%;line-height: 20px;padding: 10px 0 5px;color: #ff3976;font-size: 16px;}
    .time{width: 100%;line-height: 20px;font-size: 12px;color: #ff3976;}
    .goodtitlebox{background-color: #fff;padding: 10px 2%;width: 96%;height:26px;overflow: hidden;}
    .goodicon{width: 20px;height: 20px;float: left;margin-top: 4px;}
    .goodaddress{float: left;font-size: 14px;margin-left: 10px;height: 26px;line-height: 26px;}
    .btn_copy_a{float: right;font-size: 14px;line-height: 26px;color: #000;background-color: #f8f8f8;padding: 0 10px;border-radius: 6px;border: 1px solid #ddd;outline: transparent;}
    .detail_title{width: 92%;padding: 10px 4%;overflow: hidden;color: #000;border-bottom: 1px solid #5eaffc;background-color: #fff;}
    .img_box{width: 92%;padding: 10px 4%;overflow: hidden;background-color: #fff;margin-bottom: 10px;}
    .detail_img{width: 20%;height: 90px;float: left;}
    .detail_content{float: right;width: 76%;overflow: hidden;}
    .title{width: 100%;height: 64px;vertical-align: middle;display: table-cell;}
    .title span{display: inline-block;vertical-align: middle;font-size: 14px;}
    .total_money{height: 26px;line-height: 26px;text-align: left;color: #b9b9b9;font-size: 14px;width: 49%;display: inline-block;}
    .total_num{text-align: right;}
    .status_content{float: left;color: #fff;padding: 3px 3%;background-color: #20cb86;font-size: 14px;border-radius: 10px;}
    .size_list{margin-top:10px;width:100%;background-color:#efeff4;font-size:14px;color:#555;float:left;}
    .color_size_qty{padding: 8px 10px;}
   	.order_num{height: 26px;line-height: 26px;float: left;}
   	.foot_box{width: 94%;padding: 10px 3%;overflow: hidden;background-color: #fff;}
   	.foot_title,.foot_money{float: left;width: 50%;padding: 3px 0;font-size: 14px;height: 20px;line-height: 20px;text-align: left;}
   	.foot_money{text-align: right;}
   	.foot_total_num{margin-top: 15px;float: left;border-top: 1px solid #ddd;width: 100%;padding: 5px 0;text-align: right;font-size: 14px;color: #000;}
   	.foot_total_money{float: left;padding: 5px 0;text-align: right;font-size: 16px;color: #000;width: 100%;}
</style>
